<template>
	<view class="lh-container">
		<img-top :imgSrc="'/static/lh/sh/top.png'"></img-top>
		<left style="margin-bottom: 30rpx"></left>
		<view class="form-container">
			<uni-forms class="forms-item" ref="accountForm" :model="formData">
				<uni-forms-item>
					<input
						style="width: 600rpx"
						maxlength="11"
						placeholder="请输入手机号"
						type="tel"
						v-model="formData.mobile"
						class="uni-input-input"
						placeholder-style="color: #969696;font-size:40rpx;"
					/>
				</uni-forms-item>
				<uni-forms-item style="margin-top: 40rpx">
					
				<!-- 	<sendText v-model="formData.smsCode" :phone="formData.mobile" :channelCode="formData.channelCode" :productCode="formData.productCode" :allChecked="allChecked"></sendText> -->
					<view class="send-code">
						<input
							style="width: 300rpx; margin-left: 50rpx; font-size: 36rpx"
							maxlength="6"
							type="tel"
							v-model="formData.smsCode"
							placeholder="请输入验证码"
							class="uni-input-input"
							placeholder-style="color: #969696"
						/>
						<view class="code-line"></view>
						<view class="code" :style="{ cursor: isSend ? 'not-allowed' : '' }" @click="sendCode(true)">
							{{ isSend ? `重新发送 ${isNum}` : '获取验证码' }}
						</view>
					</view>
				</uni-forms-item>

				<view class="login-btn" style="text-align: center">
					<image src="/static/lh/sh/confirm.png" mode="widthFix" style="width: 600rpx" @click="submitform"></image>
				</view>
				<view style="margin-top: 20rpx; margin-bottom: 0rpx; padding-bottom: 0rpx; display: flex">
					<checkbox-group @change="changeAll">
						<label>
							<checkbox value="cb" :checked="allChecked" style="transform: scale(0.7)" />
							<text style="color: #ffffff; font-weight: 400; font-size: 24rpx">已阅读并同意</text>
						</label>
					</checkbox-group>
					<text style="color: #fffcb0; font-weight: 600" @click="privatePro(1)">《隐私政策》</text>
					<text style="color: #fffcb0; font-weight: 600" @click="privatePro(2524)">《产品说明》</text>
				</view>
			</uni-forms>
		</view>

		<img-top :imgSrc="'/static/lh/sh/bottom.png'"></img-top>
		<uni-popup ref="popupOk" type="bottom" border-radius="10px 10px 0 0">
			<per-info :agreementType="agreeType" @ok="ok1"></per-info>
		</uni-popup>
		<view class="arrive-btn" :style="{ display: showHeight > 900 ? '' : 'none' }">
			<image src="/static/lh/sh/confirm.png" mode="widthFix" style="width: 600rpx" @click="toTop"></image>
		</view>
		<view class="fixed-phone" @click="phone">
			<image src="/static/lh/phone.png" style="width: 45rpx" mode="widthFix"></image>
		</view>
		<view class="fixed-active" @click="privatePro(2524)">
			<image src="/static/lh/rule.png" style="width: 45rpx" mode="widthFix"></image>
		</view>
		<view class="fixed-link" @click="goLink" v-if="token">
			<image src="/static/lh/link.png" style="width: 45rpx" mode="widthFix"></image>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted, watchEffect, watch } from 'vue';
import { onLoad, onPageScroll, onReady } from '@dcloudio/uni-app';
import initApi from '@/apis/init.js';
import perInfoVue from '../../components/per-info/per-info.vue';
import { uuIds } from '@/utils/login.js';
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/store/user.js';
import { constStore } from '@/store/const';
import { getProductNum } from '@/utils/commo.js';
const { token, userInfo } = storeToRefs(useUserStore());
const {constInfo} = storeToRefs(constStore())
const accountForm = ref();
const uuIdsInit = uuIds();
// 表单数据
const showHeight = ref(0);
const isSend = ref(false);
const allChecked = ref(false);
const popupOk = ref();
const isNum = ref(0);
const isTimer = ref();
const agree = ref('同意');
const agreeType = ref(1);
const formData = reactive({
	mobile: '',
	smsCode: null,
	orderNo: null,
	channelCode: '',
	productCode: '',
	schemeCode: '',
	osName: '',
	environmentCode: null,
	scenarioCode: null
});

const changeAll = (val) => {
	if (val.detail.value.length > 0) {
		allChecked.value = true;
	} else {
		allChecked.value = false;
	}
};
const phone = () => {
	uni.makePhoneCall({
		phoneNumber: '400-8825101' //客服
	});
};
const goLink = () => {
	console.log('去哪里');
	uni.navigateTo({
		url: '/pages/lhhy/equity'
	});
};
watch(
	() => formData.mobile,
	(newVal, oldValue) => {
		const isOkMobile = /^1[3-9][0-9]\d{8}$/.test(newVal);
		if (isOkMobile) {
			uni.hideKeyboard();
		}
	}
);
// 发送验证码
const sendCode = async (flag) => {
	const isOkMobile = /^1[3-9][0-9]\d{8}$/.test(formData.mobile);
	if (!isOkMobile) return uni.utils.toast('请输入正确的手机号');
	if (!allChecked.value) return uni.utils.toast('请勾选《隐私协议》');
	if (isSend.value) return;

	try {
		const arr = {
			mobile: formData.mobile
		};
		//
		const res = await initApi.authSendSms(arr);

		if (res.code == 20000) {
			// privatePro(133);
			// 登录
			/* 	const loginArr = {
					mobile: formData.mobile,
					verificationCode: formData.smsCode
			}
			initApi.authRegisterAndLogin(loginArr) */
		} else {
			return uni.utils.toast(res.message);
		}

		// formData.orderNo = res.data.orderNo;
		isNum.value = 60;
		isSend.value = true;
		isTimer.value = setInterval(() => {
			if (isNum.value <= 0) {
				clearInterval(isTimer.value);
				isNum.value = 0;
				isSend.value = false;
			}
			isNum.value--;
		}, 1000);
		return uni.utils.toast('验证码发送成功');
	} catch (e) {
		console.log(e);
		//TODO handle the exception
		uni.utils.toast('请输入正确手机号');
		isSend.value = false;
		isNum.value = 0;
		clearInterval(isTimer.value);
	}
};
/* 发送订单 */
const submitform = async () => {
	try {
		if (!allChecked.value) return uni.utils.toast('请勾选《隐私协议》');
		if (!formData.mobile) return uni.utils.toast('请输入手机号');
		const arr = {
			productCode: 'LH2524',
			channelCode: formData.channelCode,
			mobile: formData.mobile,
			orderType: 3,
			paymentMethod: 1,
			// param: paramApi.getParam(),
			uuid: uuIdsInit,
			environmentCode: '12',
			scenarioCode: '7'
		};

		// 		productCode: 'LH2524',
		// channelCode: '4zw8ad3377b54ea8ba7cda02d2194zw8',
		// 登录
		const loginRes = await initApi.authRegisterAndLogin({
			mobile: formData.mobile,
			verificationCode: formData.smsCode
		});
		if (loginRes.code == 20000) {
			uni.setStorageSync('token', loginRes.data.accessToken);
			userInfo.value.token = loginRes.data.accessToken;
			userInfo.value.mobile = loginRes.data.mobile;
			userInfo.value.username = loginRes.data.username;
			userInfo.value.info = loginRes.data;
			token.value = loginRes.data.accessToken;
		} else {
			return uni.utils.toast(loginRes.message);
		}
		const res = await initApi.associateMemberSign(arr);
		if (res.code != 20000) return uni.utils.toast(res.message);
		if (res.code == 20000) {
			handleJumpPaySign(res.data);
		}
		clearInterval(isTimer.value);
		isNum.value = 0;
		isSend.value = false;
	} catch (e) {
		//TODO handle the exception
		console.log(e);
		clearInterval(isTimer.value);
		isNum.value = 0;
		isSend.value = false;
		return uni.utils.toast('订单订购失败');
	}
};
const handleJumpPaySign = async (query) => {
	const device = await uni.getSystemInfo();
	let ua = navigator.userAgent.toLowerCase();
	if (ua.match(/MicroMessenger/i) == 'micromessenger') {
		//是
		if (device.osName == 'android') {
			formData.osName = query.extInfo?.alipaySignUrl;
			let url =
				`${constInfo.value.baseURL}/api/associateMember/command/evokeBroswer?redirect=` +
				encodeURIComponent('https://web.78keji.cn/newbluexy/#/?url=' + 'https://openapi.alipay.com/gateway.do?' + query.extInfo?.alipaySignUrl);
			formData.osName = url;
			window.location.href = url;
		} else if (device.osName == 'ios') {
			formData.osName = device.osName;
			let url =
				'https://ulink.alipay.com/?scheme=alipays%3A%2F%2Fplatformapi%2Fstartapp%3FsaId%3D10000007%26clientVersion%3D3.7.0.0718%26qrcode%3D' +
				encodeURIComponent(encodeURIComponent('https://openapi.alipay.com/gateway.do?' + query.extInfo?.alipaySignUrl));
			window.location.href = url;
		}
	} else {
		//不是
		window.location.href = 'https://openapi.alipay.com/gateway.do?' + query.extInfo?.alipaySignUrl;
	}
};

onLoad((query) => {
	console.log(query);
	if (!query.a) {
		// uni.reLaunch({
		// 	url: '/pages/clb/404'
		// });
	}
	formData.channelCode = query.a;

	setTimeout(() => {
		getProductNum(formData.channelCode,'LH2524',uuIdsInit);
	}, 200);
});

/* 统计 */

const toTop = () => {
	uni.pageScrollTo({
		scrollTop: 0,
		duration: 300
	});
};
onPageScroll((e) => {
	showHeight.value = e.scrollTop;
});

const ok1 = () => {
	popupOk.value.close();
	allChecked.value = true;
};
const privatePro = (type) => {
	agreeType.value = type;
	popupOk.value.open('center');
};
</script>

<style lang="scss" scoped>
.form-container {
	width: 750rpx;
	margin: 0 auto;
	// background-color: #3d4ca6;
	background: linear-gradient(to right, #3d4ca6, #2e3a8b);
	box-sizing: border-box;
	overflow-x: hidden;
	.forms-item {
		width: 600rpx;
		margin: 0 auto;
	}
	.login-btn {
		animation: scaleUp 2.5s infinite; /* 动画名称、持续时间、是否无限循环 */
	}
	@keyframes scaleUp {
		0%,
		50% {
			transform: scale(1); /* 开始时的缩放比例 */
		}
		25%,
		75% {
			transform: scale(1.05); /* 缩放比例最大值 */
		}
		100% {
			transform: scale(1); /* 结束时的缩放比例 */
		}
	}
	.uni-forms-item {
		height: 100rpx;
		margin-bottom: 20 !important;
		border-bottom: 2rpx solid #eee;
		background-color: #ffffff;
		border-radius: 100rpx;
		box-sizing: border-box;
		.uni-input-input {
			width: 600rpx;
			// margin-left: 50rpx;
			text-align: center;
			font-size: 34rpx;
		}
	}
}
.lh-container {
	width: 750rpx;
	margin: 0 auto;
	// background-color: #3d4ca6;
	background: linear-gradient(to right, #3d4ca6, #2e3a8b);
	overflow: hidden;
	box-sizing: border-box;
}

:deep(.uni-checkbox-input) {
	border-radius: 80rpx !important;
}
.fixed-phone {
	position: absolute;
	top: 300rpx;
	right: 0rpx;
}
.fixed-active {
	position: absolute;
	top: 150rpx;
	right: 0rpx;
}
.fixed-link {
	position: absolute;
	top: 450rpx;
	right: 0rpx;
}
.arrive-btn {
	position: fixed;
	bottom: 20rpx;
	width: 750rpx;
	text-align: center;
}
.send-code {
	display: flex;
	height: 100rpx;
	.code-line {
		height: 50rpx;
		width: 2rpx;
		border-left: 2rpx #d93715 solid;
		margin-top: 25rpx;
		margin-right: 6rpx;
	}
	.code {
		height: 100rpx;
		width: 190rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #d93715;
		font-size: 30rpx;
		cursor: pointer;
	}
}
</style>